/**
 * src/styles/styles.scss
 *
 * Storj Stylesheet
 * Work in progress
 *
 */

// Light Theme
.v-theme--light {
  --v-border-color: 0, 0, 0;
  --v-border-opacity: 0.1;
  --v-theme-overlay-multiplier: 0.75;
  --v-border-color: #e0e0e0;
  --v-activated-opacity: 0.1 !important;
}

// Dark Theme
.v-theme--dark {
  --v-theme-overlay-multiplier: 0.75;
}

// Navigation
.v-navigation-drawer,
.v-navigation-drawer .v-list,
.v-navigation-drawer .v-list-item {
  background-color: rgb(var(--v-theme-surface)) !important;
}

.v-app-bar.v-toolbar {
  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}

// Toggle visibility class
.show {
  display: block;
}

// Custom rounded class
.rounded-xlg {
  border-radius: 12px !important;
}

// Success button text
.v-btn.v-theme--light.bg-success {
  color: #fff;
}

// Button Shadow
.v-btn--elevated,
.v-btn--variant-flat {
  // box-shadow: rgba(var(--v-border-color), 0.1) 0px 1px 0px 0px !important;
  box-shadow: rgba(31, 35, 40, 0.04) 0px 1px 0px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset;
}

.v-btn--variant-outlined {
  box-shadow: rgba(31, 35, 40, 0.04) 0px 1px 0px 0px;
}

.v-btn--elevated:hover,
.v-btn--variant-flat:hover,
.v-btn--variant-outlined {
  // box-shadow: rgba(var(--v-border-color), 0.1) 0px 1px 0px 0px !important;
  box-shadow: rgba(31, 35, 40, 0.04) 0px 1px 0px 0px;
}


// Button Outlines
.v-btn.v-theme--light.text-default.v-btn--variant-outlined {
  border-color: rgba(var(--v-border-color), 0.2);
  background: rgb(var(--v-theme-surface));
}

.v-btn.v-theme--light.text-default.v-btn--variant-outlined:hover {
  border-color: #9da3a7;
  // color: rgb(var(--v-theme-primary));
  border-color: rgba(var(--v-border-color), 0.5);
}

.v-btn.v-theme--dark.text-default.v-btn--variant-outlined {
  border-color: #a9b0b949;
  // border-color: rgba(var(--v-border-color), var(--v-border-opacity));
}

.v-btn.v-theme--dark.text-default.v-btn--variant-outlined:hover {
  border-color: #a9b0b979;
}

// Button focus style
.v-btn:focus {
  // box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(103, 146, 244) 0px 0px 0px 3px !important;
  // box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, currentColor 0px 0px 0px 1px !important;
  // outline: none !important;
}

.v-btn--size-default {
  --v-btn-size: 0.8rem;
  --v-btn-height: 44px;
}

.v-btn--size-large {
  --v-btn-size: 0.875rem;
  --v-btn-height: 48px;
}

// Menu border
.v-menu>.v-overlay__content {
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  border-radius: 12px;
}

// Menu list item
.v-list-item--active .v-list-item-title {
  font-weight: 700 !important;
}

// Menu list item active background
// .v-list-item--variant-text .v-list-item__overlay {
//   background: rgb(var(--v-border-color));
// }


// Card Light Theme
.v-card.v-theme--light {
  border: 1px solid #e0e0e0;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 0px 0px;
}

// Card dark Theme
.v-card.v-theme--dark {
  background: --v-theme-surface;
  box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 0px 0px;
}


// Cards Padding
.v-card-item {
  padding: 1rem;
}

// Cards Title
.v-card-item .v-card-title {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0;
}

// Overlay behind modals/dialogs opacity and color
.v-overlay__scrim {
  background: #000;
  opacity: 0.75;
}

// Align the checkboxes in the tables
.v-selection-control {
  contain: inherit;
}

// Make the checkbox selection square instead of rounded
.v-selection-control__input {
  border-radius: 8px;
}

.v-selection-control__input::before {
  border-radius: 8px;
}


// Sorting icon
.mdi-arrow-up::before,
.mdi-arrow-down::before {
  // content: "\F005D";
  font-size: 14px;
}

// Breadcrumbs
.v-breadcrumbs {
  min-height: 24px;
}

.v-breadcrumbs-item {
  padding: 0 !important;
}

// Snackbar
.v-snackbar__content {
  width: 100%;
}

// Table Headers
.v-data-table-header__content {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 1px;
}

// Table content
.v-list-item__content {
  white-space: nowrap;
  overflow: visible;
}

// Table Footer
.v-data-table-footer {
  font-size: 14px;
}

.v-data-table-footer {
  border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}

.v-data-table-footer .v-field__field {
  height: 2.25rem;
}

.v-data-table-footer .v-field {
  padding-right: 0.5rem;
}

.v-data-table-footer .v-field__input {
  padding-top: 0;
  font-size: 14px;
  line-height: 1;
}

// Table Fonts
table {
  font-size: 14px;
}

// Table Pagination
.v-data-table-footer__pagination .v-btn {
  width: auto;
}

// Search styles
.v-field.v-field--prepended {
  --v-field-padding-start: 8px;
  padding-left: 16px;
}


// Links
.link {
  color: rgb(var(--v-theme-primary));
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .15s ease;
}

.link:hover {
  color: rgb(var(--v-theme-secondary));
  background-size: 100% 1px;
}


// Tooltips
.v-tooltip>.v-overlay__content {
  background: rgba(var(--v-theme-on-surface), 0.9) !important;
  color: rgb(var(--v-theme-surface)) !important;
  border: 1px solid rgba(var(--v-theme-surface), 0.2);
  font-weight: 500;
  border-radius: 20px !important;
  padding: 6px 14px;
  backdrop-filter: blur(12px);
}

// Alerts

.v-alert-title {
  font-weight: bold !important;
  letter-spacing: 0 !important;
}

.v-alert__prepend {
  margin-top: 12px;
}

.v-alert__append,
.v-alert__close {
  margin-top: 4px;
}

.v-alert__close .v-btn {
  color: rgb(var(--v-theme-on-surface)) !important;
}

// Chips
.v-chip--variant-outlined {
  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
}